<template>
    <view class="page-container">
        <!-- 轮播图 -->
        <view class="swiper-wrapper">
            <swiper class="main-swiper" :autoplay="true" :circular="true" indicator-dots indicator-color="#999" indicator-active-color="#333">
                <swiper-item v-for="(swiper,index) in swiperList" :key="index" @tap="onSwiperTap(swiper)">
                    <image class="swiper-image" mode="aspectFill" :src="baseUrl+swiper.img"></image>
                </swiper-item>
            </swiper>
        </view>

        <!-- 功能菜单 -->
        <view class="function-grid">
            <block v-for="item in menuList" :key="item.roleName">
                <block v-if="(role==item.roleName||table==item.tableName) && index<=4 && index>0" v-for="(menu,index) in item.backMenu" :key="index">
                    <block v-for="(child,sort) in menu.child" :key="sort">
                        <block v-for="(button,sort2) in child.buttons" :key="sort2">
                            <view v-if="button=='查看'" class="grid-item" @tap="onPageTap2('../'+child.tableName+'/list')">
                                <view class="grid-icon" :class="child.appFrontIcon"></view>
                                <text class="grid-label">{{child.menu.split("列表")[0]}}</text>
                            </view>
                        </block>
                    </block>
                </block>
            </block>
        </view>

        <!-- 中医药科普 -->
        <section class="section-card">
            <view class="section-header">
                <h3 class="section-title">中医药科普展示</h3>
                <text class="section-more" @tap="onPageTap('xiqukepu')">查看更多</text>
            </view>
            <view class="news-list">
                <view v-for="(item,index) in xiqukepuList" :key="index" class="news-item" @tap="onDetailTap('xiqukepu',item.id)">
                    <view class="dot-indicator"></view>
                    <text class="news-title">{{item.xiqukepuName}}</text>
                    <text class="icon-right"></text>
                </view>
            </view>
        </section>

        <!-- 中医药展示 -->
        <section class="section-card">
            <view class="section-header">
                <h3 class="section-title">中医药展示</h3>
                <text class="section-more" @tap="onPageTap('xiqu')">查看更多</text>
            </view>
            <view class="product-grid">
                <view v-for="(product,index) in xiquList" :key="index" class="product-card" @tap="onDetailTap('xiqu',product.id)">
                    <image class="product-image" mode="aspectFill" :src="baseUrl+product.xiquPhoto"></image>
                    <text class="product-name">{{product.xiquName}}</text>
                </view>
            </view>
        </section>

        <!-- 公告 -->
        <section class="section-card">
            <view class="section-header">
                <h3 class="section-title">公告展示</h3>
                <text class="section-more" @tap="onPageTap('gonggao')">查看更多</text>
            </view>
            <view class="news-list">
                <view v-for="(item,index) in gonggaoList" :key="index" class="news-item" @tap="onDetailTap('gonggao',item.id)">
                    <view class="dot-indicator"></view>
                    <text class="news-title">{{item.gonggaoName}}</text>
                    <text class="icon-right"></text>
                </view>
            </view>
        </section>
    </view>
</template>



<script>
import menu from "@/utils/menu";
import "@/assets/css/global-restaurant.css";
import uniIcons from "@/components/uni-ui/lib/uni-icons/uni-icons.vue";
export default {
  components: {
    uniIcons,
  },
  data() {
    return {
      role: "",
      table: "",
      autoplaySwiper: false ? true : false,
      intervalSwiper: false
        ? $template2.front.base.swiper.autoplay.delay
        : 5000,
      //轮播
      swiperList: [],
      xiqukepuList: [],
      xiquList: [],
      gonggaoList: [],
      menuList: [],
      swiperMenuList: [],
      iconArr: [
        "cuIcon-same",
        "cuIcon-deliver",
        "cuIcon-evaluate",
        "cuIcon-shop",
        "cuIcon-ticket",
        "cuIcon-cascades",
        "cuIcon-discover",
        "cuIcon-question",
        "cuIcon-pic",
        "cuIcon-filter",
        "cuIcon-footprint",
        "cuIcon-pulldown",
        "cuIcon-pullup",
        "cuIcon-moreandroid",
        "cuIcon-refund",
        "cuIcon-qrcode",
        "cuIcon-remind",
        "cuIcon-profile",
        "cuIcon-home",
        "cuIcon-message",
        "cuIcon-link",
        "cuIcon-lock",
        "cuIcon-unlock",
        "cuIcon-vip",
        "cuIcon-weibo",
        "cuIcon-activity",
        "cuIcon-friendadd",
        "cuIcon-friendfamous",
        "cuIcon-friend",
        "cuIcon-goods",
        "cuIcon-selection",
      ],
    };
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },
  },
  async onLoad() {
    let _this = this;
    _this.role = uni.getStorageSync("role");
    _this.table = uni.getStorageSync("nowTable");
    let res = await _this.$api.session(_this.table);
    _this.user = res.data;
    _this.tableName = _this.table;
    let menus = menu.list();
    _this.menuList = menus;
    _this.menuList.forEach((item, key) => {
      if (_this.role == item.roleName) {
        item.backMenu.forEach((item2, key2) => {
          if (item2.child[0].buttons.indexOf("查看") > -1) {
            _this.swiperMenuList.push(item2);
          }
        });
      }
    });
  },
  async onShow() {
    // 轮播图
    let swiperList = [];
    let res = await this.$api.page("config", {
      page: 1,
      limit: 5,
    });
    for (let item of res.data.list) {
      if (item.value && item.value != "" && item.value != null) {
        swiperList.push({
          img: item.value,
        });
      }
    }
    if (swiperList) {
      this.swiperList = swiperList;
    }
    let xiqukepu = await this.$api.list("xiqukepu", {
      page: 1,
      limit: 6,
    });

    this.xiqukepuList = xiqukepu.data.list;
    this.xiqukepuList.forEach(function (item, index) {
      if (
        item.xiqukepuContent != null &&
        item.xiqukepuContent != "" &&
        item.xiqukepuContent != "null"
      ) {
        item.xiqukepuContent = item.xiqukepuContent.replace(
          /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
          ""
        ); //替换图片
      }
    });

    let xiqu = await this.$api.list("xiqu", {
      page: 1,
      limit: 6,
    });

    this.xiquList = xiqu.data.list;
    this.xiquList.forEach(function (item, index) {
      if (
        item.xiquContent != null &&
        item.xiquContent != "" &&
        item.xiquContent != "null"
      ) {
        item.xiquContent = item.xiquContent.replace(
          /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
          ""
        ); //替换图片
      }
    });

    let gonggao = await this.$api.list("gonggao", {
      page: 1,
      limit: 6,
    });

    this.gonggaoList = gonggao.data.list;
    this.gonggaoList.forEach(function (item, index) {
      if (
        item.gonggaoContent != null &&
        item.gonggaoContent != "" &&
        item.gonggaoContent != "null"
      ) {
        item.gonggaoContent = item.gonggaoContent.replace(
          /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
          ""
        ); //替换图片
      }
    });
  },

  methods: {
    onPageTap2(url) {
      uni.setStorageSync("useridTag", 0);
      uni.navigateTo({
        url: url,
        fail: function () {
          uni.switchTab({
            url: url,
          });
        },
      });
    },
    //轮播图跳转
    onSwiperTap(e) {},
    // 新闻详情
    onNewsDetailTap(id) {
      this.$utils.jump(`../news/detail?id=${id}`);
    },
    // 推荐列表点击详情
    onDetailTap(tableName, id) {
      this.$utils.jump(`../${tableName}/detail?id=${id}`);
    },
    onPageTap(tableName) {
      uni.navigateTo({
        url: `../${tableName}/list`,
        fail: function () {
          uni.switchTab({
            url: `../${tableName}/list`,
          });
        },
      });
    },
  },
};
</script>


<style lang="scss">
.page-container {
    padding: 20rpx;
    background: #f5f7fa;
}

/* 轮播图样式 */
.swiper-wrapper {
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
    margin-bottom: 40rpx;
    
    .main-swiper {
        height: 360rpx;
        
        .swiper-image {
            width: 100%;
            height: 100%;
        }
    }
}

/* 功能菜单 */
.function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
    margin-bottom: 40rpx;
    
    .grid-item {
        text-align: center;
        padding: 20rpx;
        background: white;
        border-radius: 16rpx;
        transition: transform 0.2s;
        
        &:active {
            transform: scale(0.96);
        }
    }
    
    .grid-icon {
        width: 80rpx;
        height: 80rpx;
        margin: 0 auto 16rpx;
        background: linear-gradient(135deg, #4a90e2, #6c5ce7);
        border-radius: 50%;
        color: white;
        font-size: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .grid-label {
        font-size: 24rpx;
        color: #333;
        line-height: 1.4;
        display: block;
    }
}

/* 通用卡片样式 */
.section-card {
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;
        
        .section-title {
            font-size: 32rpx;
            color: #2c3e50;
            font-weight: 600;
            position: relative;
            padding-left: 20rpx;
            
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 6rpx;
                height: 28rpx;
                background: #4a90e2;
                border-radius: 4rpx;
            }
        }
        
        .section-more {
            font-size: 26rpx;
            color: #999;
            padding: 8rpx 20rpx;
            border-radius: 20rpx;
            
            &:active {
                background: #f5f5f5;
            }
        }
    }
}

/* 新闻列表 */
.news-list {
    .news-item {
        display: flex;
        align-items: center;
        padding: 28rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
            border-bottom: none;
        }
        
        .dot-indicator {
            width: 12rpx;
            height: 12rpx;
            background: #4a90e2;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        
        .news-title {
            flex: 1;
            font-size: 28rpx;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .icon-right {
            font-family: 'cuIcon';
            color: #999;
            font-size: 32rpx;
            margin-left: 20rpx;
        }
    }
}

/* 产品网格 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    
    .product-card {
        background: white;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
        
        .product-image {
            width: 100%;
            height: 280rpx;
        }
        
        .product-name {
            display: block;
            padding: 20rpx;
            font-size: 28rpx;
            color: #333;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>